<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_元素溢出</title>
    <style>
        .overflow{
            background-color: cyan;
            /*溢出的前提一定是限制父元素的大小*/
            width: 200px;
            height: 200px;
            overflow: visible;/* 溢出：visible 可见的 */
            overflow: hidden;/* 溢出：hidden 不可见 隐藏的 多余的裁掉*/
            overflow: scroll;/* 溢出：scroll 拖拽条 无论是否溢出 两个方向都显示拖拽条 */
            overflow: auto;/* 溢出：auto 自动的 哪个方向溢出哪个方向显示拖拽条 */
        }
        .txt{
          background-color: #0aa1ed;
          width: 200px;
          /*三句组合：缺一不可*/
          white-space: nowrap;/*强制文本不允许换行*/
          overflow: hidden;/*  溢出部分隐藏（裁掉） */
          text-overflow: ellipsis;/* 超出部分显示省略号 */
        }
    </style>
</head>
<body>
<div class="txt" title="  lorem ipsum dolor sit amet, consectetur adipisicing elit.">
  lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="overflow" >
    <img src="大埋.jpg" >
    <img src="大眼阿尼亚.jpg">
    <img src="小哀.jpg">
</div>
</div>

</body>
</html>